window.onload = function(){
    var imgList = document.getElementById("imgList");
    var imgArr = document.getElementsByTagName("img");
    imgList.style.width = 520*imgArr.length + "px";
    var navDiv = document.getElementById("navDiv");
    var outer =document.getElementById("outer");
    navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
    var index = 0;
    var allA = document.getElementsByTagName("a");
    allA[index].style.backgroundColor = "black";

/* 功能：点击超链接，切换到指定的图片*/
    function move(divobj, attr, target, speed, callback){
        var current = parseInt(getStyle(divobj,attr));
        if(current > target){
            speed = -speed;
        }		
        clearInterval(divobj.timer);	
        divobj.timer =  setInterval(function(){
            var oldValue = parseInt(getStyle(divobj,attr)) ;	
            var newValue = oldValue + speed;		
            if(speed<0 && newValue < target || speed>0 && newValue >target){
                newValue = target;
            }						
            divobj.style[attr] = newValue +"px";
            if(newValue == target){
                clearInterval(divobj.timer);
                callback && callback();
            }
        },30);					
    };
    
    function getStyle(obj,name){
        if(window.getComputedStyle){
            return getComputedStyle(obj,null)[name];						
        }else{
            return obj.currentStyle[name];						
        }
    }

    for(var i=0; i<allA.length; i++){				
        allA[i].num = i;		
        allA[i].onclick = function(){			
            clearInterval(timer);
            index = this.num;
            setA();	
            move(imgList, "left", -520*index , 20 , function(){
                autoChange();					
            });	
        }
    }	
    autoChange();
    
    function setA(){	
        if(index >= imgArr.length - 1){
            index = 0;   //则将index设置为0
            imgList.style.left = 0;
        }
        for(var i=0; i<allA.length; i++){
            allA[i].style.backgroundColor = "";
        }
        allA[index].style.backgroundColor = "black";
    }
    var timer;
    
//创建一个函数，用来定时去切换图片			
    function autoChange(){	
        timer = setInterval(function(){
            index++;
            index %= imgArr.length;		
            move(imgList, "left", -520*index , 20 , function(){
                setA();
            })
        },2000);
    }	
}
